<template>
<el-dialog top="90px" :visible.sync="visible" :title="dataForm.details ? '详情' :(!dataForm.id ? $t('add') : $t('update'))" :close-on-click-modal="false" :close-on-press-escape="false" @close="close()" :destroy-on-close="true" @opened="opened()">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '140px' : '130px'" :disabled="disabled">
        <el-row>
            <el-col :span="12">
                <el-form-item label="起点名称" prop="nameStart">
                    <el-input v-model="dataForm.nameStart" :placeholder="disabled?'':'起点名称'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="终点名称" prop="nameEnd">
                    <el-input v-model="dataForm.nameEnd" :placeholder="disabled?'':'终点名称'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="发车点" prop="startArea">
                    <el-input v-model="dataForm.startArea" :placeholder="disabled?'':'发车点'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="时刻表" prop="time">
                    <el-input v-model="dataForm.time" :placeholder="disabled?'':'时刻表'"></el-input>
                </el-form-item>
            </el-col>
           
            <el-col :span="12">
                <el-form-item label="经度" prop="longitude">
                    <el-input v-model="dataForm.longitude" :placeholder="disabled?'':'经度'" type="number"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="纬度" prop="latitude">
                    <el-input v-model="dataForm.latitude" :placeholder="disabled?'':'纬度'" type="number"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="交通工具类型" prop="type">
                    <SelectComponent ref="type" dictType="traffic_type" v-model="dataForm.type" :placeholder="disabled?'':'交通工具类型'">
                    </SelectComponent>
                </el-form-item>
            </el-col>
             <el-col :span="24">
                <el-form-item label="地址" prop="province">
                    <el-select v-model="dataForm.province" :placeholder="disabled?'':'省编码'" clearable style="width:14%" @change="
                (val) => {
                  regionChange(val, 'province');
                }
              ">
                        <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="dataForm.city" :placeholder="disabled?'':'市'" clearable style="width:14%;margin:0 1%" @change="
                (val) => {
                  regionChange(val, 'city');
                }
              ">
                        <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="dataForm.area" :placeholder="disabled?'':'区'" clearable style="width:14%" @change="
                (val) => {
                  regionChange(val, 'area');
                }
              ">
                        <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-input style="width:14%;margin:0 1%" v-model="dataForm.street" :placeholder="disabled?'':'街道'"></el-input>
                    <el-input v-model="dataForm.areaDetail" :placeholder="disabled?'':'详细地址'" style="width:40%"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="温馨提示" prop="tips">
                    <el-input v-model="dataForm.tips" :placeholder="disabled?'':'温馨提示'" type="textarea" :rows="2"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="详情介绍" prop="info">
                    <el-input v-model="dataForm.info" :placeholder="disabled?'':'详情介绍'" type="textarea" :rows="3"></el-input>
                </el-form-item>
            </el-col>
             <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="dataForm.remark" :placeholder="disabled?'':'备注'" type="textarea" :rows="2"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <template slot="footer" v-if="!disabled">
        <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("confirm")
      }}</el-button>
    </template>
</el-dialog>
</template>

<script>
import debounce from "lodash/debounce";
import mixinRegionModule from "@/mixins/region-module";
export default {
    mixins: [mixinRegionModule],
    data() {
        return {
            visible: false,
            dataForm: {
                id: "",
                nameStart: "",
                nameEnd: "",
                startArea: "",
                time: "",
                province: "",
                city: "",
                area: "",
                street: "",
                areaDetail: "",
                longitude: "",
                latitude: "",
                type: "",
                tips: "",
                info: "",
                status: "",
                remark: "",
                delFlag: "",
                creator: "",
                createDate: "",
                updater: "",
                updateDate: "",
            },
        };
    },
    props: {
        disabled: Boolean
    },
    created() {
        this.provincAreaDetailInfoList();
    },
    computed: {
        dataRule() {
            return {
                latitude: [{
                    validator: this.$formValidate.validateDecimal("纬度", 11, 8),
                    trigger: ["blur"],
                }, ],
                longitude: [{
                    validator: this.$formValidate.validateDecimal("经度", 11, 8),
                    trigger: ["blur"],
                }, ],
            };
        },
    },
    created() {
        this.provincAreaDetailInfoList();
    },
    methods: {
        opened() {
            this.provincAreaDetailInfoList();
            if (this.dataForm.city) {
                this.cityAreaDetailInfoList(this.dataForm.province);
            }
            if (this.dataForm.area) {
                this.countyAreaDetailInfoList(this.dataForm.city);
            }
        },
        close() {
            this.dataForm = {
                id: "",
                name: "",
                longitude: "",
                latitude: "",
                type: "",
                info: "",
                status: "",
                remark: "",
                delFlag: "",
                creator: "",
                createDate: "",
                updater: "",
                updateDate: "",
            };
            this.$emit("changeDisabled");
        },
        init() {
            this.visible = true;
            this.$nextTick(() => {
                this.$refs["dataForm"].resetFields();
                if (this.dataForm.id) {
                    this.getInfo();
                }
            });
        },
        // 获取信息
        getInfo() {
            this.$http
                .get("/sys/istraffic/" + this.dataForm.id)
                .then(({
                    data: res
                }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    this.dataForm = {
                        ...this.dataForm,
                        ...res.data,
                    };
                    this.dataForm.type = this.dataForm.type + "";
                    this.$refs.type.selectValue = this.dataForm.type;
                })
                .catch(() => {});
        },
        // 表单提交
        dataFormSubmitHandle: debounce(
            function () {
                this.$refs["dataForm"].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    this.$http[!this.dataForm.id ? "post" : "put"](
                            "/sys/istraffic/",
                            this.dataForm
                        )
                        .then(({
                            data: res
                        }) => {
                            if (res.code !== 0) {
                                return this.$message.error(res.msg);
                            }
                            this.$message({
                                message: this.$t("prompt.success"),
                                type: "success",
                                duration: 500,
                                onClose: () => {
                                    this.visible = false;
                                    this.$emit("refreshDataList");
                                },
                            });
                        })
                        .catch(() => {});
                });
            },
            1000, {
                leading: true,
                trailing: false
            }
        ),
    },
};
</script>
